<template>

  <div class="chat-window">
    <div class="messages-container">
      <div
        v-for="message in messages"
        :key="message.id"
        :class="['message', { 'message-user': message.sender === 'user' }]"
      >
        <span>{{ message.text }}</span>
      </div>
    </div>
    <input
      type="text"
      v-model="inputText"
      @keyup.enter="sendMessage"
      placeholder="Type a message..."
    />
  </div>
</template>

<script>
import {rebotMessage} from "@/api/system/rebotMessage";

export default {
  data() {
    return {
      inputText: '',
      messages: []
    };
  },
  methods: {
    sendMessage() {
      if (this.inputText.trim() !== '') {
        this.messages.push({
          id: this.messages.length,
          sender: 'user',
          text: this.inputText
        });
        this.inputText = '';
        this.processMessage();
      }
    },
    processMessage() {
      let requestData = { message: this.inputText }
      // 调用后端API处理消息
      rebotMessage(requestData).then(response => {
        const robotResponse = response.msg;
        this.messages.push({
          id: this.messages.length,
          sender: 'robot',
          text: robotResponse
        });
      });
    }
  }
};
</script>

<style scoped>
.chat-window {
  width: 350px;
  height: 500px;
  border: 1px solid #ccc;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1;
  position: relative;
  background-color: #f8f8f8;
}
.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}
.message {
  background-color: #f0f0f0;
  padding: 5px;
  border-radius: 5px;
  margin: 5px 0;
}
.message-user {
  background-color: #007bff;
  color: white;
}
input {
  width: 100%;
  padding: 10px;
  border: none;
  border-top: 1px solid #ccc;
}
</style>
